<template>
  <div class="app-container home">
    <div class="header-box">
      <div class="header-left" id="time"></div>
      <div class="header-cen">
        <!-- <h1>来源杂货大数据展示</h1> -->
        <span class="header-title">来源杂货大数据展示</span>
      </div>
      <div class="header-right"></div>
    </div>
    <!--中间-->
    <div class="content-box">
      <!--左边-->
      <div class="content-left fl">
        <!--左上-->
        <div class="left-top">
          <div class="title">
            <span>基本信息</span>
          </div>
          <div class="base-left" id="shizhong"></div>
          <!-- 4个主要的数据 -->
          <div class="bottom-data">
            <div
              class="item-box"
              v-for="(item, index) in numberData"
              :key="index"
            >
              <div class="d-flex">
                <span class="coin">￥</span>
                <dv-digital-flop
                  :config="item.number"
                  style="width: 100%; height: 100%; margin-left: 5px"
                />
              </div>
              <p class="text" style="text-align: center">
                {{ item.text }}
                <span class="colorYellow">(件)</span>
              </p>
            </div>
          </div>
        </div>
        <!--左中-->
        <div class="left-center">
          <div class="title">
            <span>杂货类别</span>
          </div>
          <div class="allnav" id="ceshi"></div>
        </div>
        <!--左下-->
        <div class="left-bottom">
          <div class="title">
            <span>杂货销量</span>
          </div>
          <div class="allnav" id="ceshi2"></div>
        </div>
      </div>
      <!--中间-->
      <div class="content-center fl">
        <!--头部-->
        <div class="center-top">
          <div class="top-bottom">
            <div class="allnav" id="map"></div>
          </div>
        </div>
        <!--底部-->
        <div class="center-bottom">
          <dv-border-box-8 :reverse="true" :color="['#55bcd4', '#55bcd4']">
            <div class="bottom-left fl">
              <div class="allnav" id="ceshi6"></div>
            </div>
            <div class="bottom-right fr">
              <div
                class="allnav"
                id="ceshi7"
                style="width: 100%; height: 100%"
              ></div>
            </div>
          </dv-border-box-8>
        </div>
      </div>
      <!--右边-->
      <div class="content-right fr">
        <!--右上-->
        <div class="right-top">
          <div
            class="navboxall"
            id="echart2"
            style="width: 100%; height: 100%"
          ></div>
        </div>
        <!--右中-->
        <div class="right-center">
          <div class="title">
            <span>销量排行</span>
          </div>
          <div demo-bg>
            <dv-scroll-board
              :config="config"
              style="width: 400px; height: 220px"
            />
          </div>
        </div>
        <!--右下-->
        <div class="right-bottom">
          <div class="title">
            <span>销售额统计</span>
          </div>
          <div id="main6" style="width: 100%; height: 300px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import { onMounted, ref, reactive } from "vue";
import * as echarts from "echarts";
import { init } from "echarts";
import chinaJson from "../utils/china.json";
import lifeData from "../utils/life.json";
// 获取自适应的盒子
const dataScreenRef = (ref < HTMLElement) | (null > null);
const numberData = ref([
  {
    number: {
      number: [159.00],
      toFixed: 1,
      content: "{nt}",
    },
    text: "今日收入",
  },
  {
    number: {
      number: [144],
      toFixed: 1,
      content: "{nt}",
    },
    text: "今日支出",
  },
  {
    number: {
      number: [361],
      toFixed: 1,
      content: "{nt}",
    },
    text: "进货数量",
  },
  {
    number: {
      number: [157],
      toFixed: 1,
      content: "{nt}",
    },
    text: "售出数量",
  },
]);
const config = reactive({
  header: ["名称", "同比", "销量"],
  data: [
    [
      '<span style="color:#37a2da;">薯片</span>',
      '<span style="color:#ff9f7f;">11.9%</span>',
      '<span style="color:#e062ae;">1653</span>',
    ],
    [
      '<span style="color:#37a2da;">鸡蛋</span>',
      '<span style="color:#ff9f7f;">23%</span>',
      '<span style="color:#e062ae;">2300</span>',
    ],
    [
      '<span style="color:#37a2da;">饮料</span>',
      '<span style="color:#ff9f7f;">56.9%</span>',
      '<span style="color:#e062ae;">5633</span>',
    ],
    ["雪糕", "25%", "1652"],
    ["电器", "3.6%", "68"],
    ["蔬菜", "45%", "3600"],
    ["卤味", "36%", "16930"],
    ["棉被", "5.3%", "563"],
    ["佐料", "8.9%", "586"],
    ["海鲜", "24%", "4589"],
  ],
  index: true,
  columnWidth: [50],
  headerBGC: "",
  oddRowBGC: "",
  evenRowBGC: "",
  indexHeader: "",
  align: ["center"],
});

onMounted(() => {
  // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
  if (dataScreenRef) {
    dataScreenRef.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.style.width = `1920px`;
    dataScreenRef.style.height = `1080px`;
  }
  // 为浏览器绑定事件
  window.addEventListener("resize", resize);
  initChart();
  ceshi1();
  ceshi2();
  ceshi6();
  ceshi7();
  ceshi9(lifeData);
  init_myChart6();
  shizhong();
  changeTiming()
});
// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
// 监听浏览器 resize 事件
const resize = () => {
  if (dataScreenRef) {
    dataScreenRef.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};
// 时间走动
function changeTiming() {
  setInterval(() => {
    changeNumber();
  }, 3000);
}
// 数字改变
function changeNumber() {
  numberData.value.forEach((item, index) => {
    item.number.number[0] += ++index;
    item.number = { ...item.number };
  });
}
// 地图echarts
function initChart() {
  const myChart = init(document.getElementById("map"));
  echarts.registerMap("china", chinaJson);
  var chinaGeoCoordMap = {
    黑龙江: [127.9688, 45.368],
    内蒙古: [110.3467, 41.4899],
    吉林: [125.8154, 44.2584],
    北京市: [116.4551, 40.2539],
    辽宁: [123.1238, 42.1216],
    河北: [114.4995, 38.1006],
    天津: [117.4219, 39.4189],
    山西: [112.3352, 37.9413],
    陕西: [109.1162, 34.2004],
    甘肃: [103.5901, 36.3043],
    宁夏: [106.3586, 38.1775],
    青海: [101.4038, 36.8207],
    新疆: [87.9236, 43.5883],
    西藏: [91.11, 29.97],
    四川: [103.9526, 30.7617],
    重庆: [108.384366, 30.439702],
    山东: [117.1582, 36.8701],
    河南: [113.4668, 34.6234],
    江苏: [118.8062, 31.9208],
    安徽: [117.29, 32.0581],
    湖北: [114.3896, 30.6628],
    浙江: [119.5313, 29.8773],
    福建: [119.4543, 25.9222],
    江西: [116.0046, 28.6633],
    湖南: [113.0823, 28.2568],
    贵州: [106.6992, 26.7682],
    云南: [102.9199, 25.4663],
    广东: [113.12244, 23.009505],
    广西: [108.479, 23.1152],
    海南: [110.3893, 19.8516],
    上海: [121.4648, 31.2891],
  };
  var chinaDatas = [
    [
      {
        name: "黑龙江",
        value: 3,
      },
    ],
    [
      {
        name: "内蒙古",
        value: 1,
      },
    ],
    [
      {
        name: "吉林",
        value: 0,
      },
    ],
    [
      {
        name: "辽宁",
        value: 0,
      },
    ],
    [
      {
        name: "河北",
        value: 0,
      },
    ],
    [
      {
        name: "天津",
        value: 0,
      },
    ],
    [
      {
        name: "山西",
        value: 0,
      },
    ],
    [
      {
        name: "陕西",
        value: 0,
      },
    ],
    [
      {
        name: "甘肃",
        value: 0,
      },
    ],
    [
      {
        name: "宁夏",
        value: 0,
      },
    ],
    [
      {
        name: "青海",
        value: 0,
      },
    ],
    [
      {
        name: "新疆",
        value: 0,
      },
    ],
    [
      {
        name: "西藏",
        value: 0,
      },
    ],
    [
      {
        name: "四川",
        value: 0,
      },
    ],
    [
      {
        name: "重庆",
        value: 0,
      },
    ],
    [
      {
        name: "山东",
        value: 0,
      },
    ],
    [
      {
        name: "河南",
        value: 0,
      },
    ],
    [
      {
        name: "江苏",
        value: 3,
      },
    ],
    [
      {
        name: "安徽",
        value: 0,
      },
    ],
    [
      {
        name: "湖北",
        value: 0,
      },
    ],
    [
      {
        name: "浙江",
        value: 0,
      },
    ],
    [
      {
        name: "福建",
        value: 0,
      },
    ],
    [
      {
        name: "江西",
        value: 0,
      },
    ],
    [
      {
        name: "湖南",
        value: 0,
      },
    ],
    [
      {
        name: "贵州",
        value: 0,
      },
    ],
    [
      {
        name: "广西",
        value: 0,
      },
    ],
    [
      {
        name: "海南",
        value: 0,
      },
    ],
    [
      {
        name: "上海",
        value: 1,
      },
    ],
  ];
  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539];
      if (fromCoord && toCoord) {
        res.push([
          {
            coord: fromCoord,
            value: dataItem[0].value,
          },
          {
            coord: toCoord,
          },
        ]);
      }
    }
    return res;
  };

  var series = [];
  [["北京市", chinaDatas]].forEach(function (item, i) {
    console.log(item);
    series.push(
      {
        type: "lines",
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: "arrow", //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.3, //尾迹线条曲直度
          },
        },
        data: convertData(item[1]),
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: "stroke", //波纹绘制方式 stroke, fill
          scale: 4, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: "right", //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {
              //圆环显示文字
              return params.data.name;
            },
            fontSize: 13,
          },
          emphasis: {
            show: true,
          },
        },
        symbol: "circle",
        symbolSize: function (val) {
          return 5 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: "#f00",
          },
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([
              dataItem[0].value,
            ]),
          };
        }),
      },
      //被攻击点
      {
        type: "scatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: "stroke",
          scale: 4,
        },
        label: {
          normal: {
            show: true,
            position: "right",
            //offset:[5, 0],
            color: "#0f0",
            formatter: "{b}",
            textStyle: {
              color: "#0f0",
            },
          },
          emphasis: {
            show: true,
            color: "#f60",
          },
        },
        symbol: "pin",
        symbolSize: 50,
        data: [
          {
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10]),
          },
        ],
      }
    );
  });
  const option = {
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(166, 200, 76, 0.82)",
      borderColor: "#FFFFCC",
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: "z-index:100",
      formatter: function (params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var res = "";
        var name = params.name;
        var value = params.value[params.seriesIndex + 1];
        res =
          "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        return res;
      },
    },
    /*backgroundColor:"#013954",*/
    visualMap: {
      //图例值控制
      min: 0,
      max: 1,
      calculable: true,
      show: false,
      color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
      textStyle: {
        color: "#fff",
      },
    },
    geo: {
      map: "china",
      zoom: 1.2,
      label: {
        emphasis: {
          show: false,
        },
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: "rgba(51, 69, 89, .5)", //地图背景色
          borderColor: "#516a89", //省市边界线00fcff 516a89
          borderWidth: 1,
        },
        emphasis: {
          color: "rgba(37, 43, 61, .5)", //悬浮背景
        },
      },
    },
    series: series,
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
// 杂货类别
function ceshi1() {
  var myChart = init(document.getElementById("ceshi"));
  var ydata = [
    {
      name: "薯片",
      value: 18,
    },
    {
      name: "蔬菜",
      value: 16,
    },
    {
      name: "饮料",
      value: 15,
    },
    {
      name: "家禽",
      value: 14,
    },
    {
      name: "生活用品",
      value: 10,
    },
    {
      name: "熟食",
      value: 7.9,
    },
    {
      name: "佐料",
      value: 6.7,
    },
    {
      name: "糕点",
      value: 6,
    },
    {
      name: "电器",
      value: 4.5,
    },
    {
      name: "大米",
      value: 3,
    },
  ];
  var color = [
    "#8d7fec",
    "#5085f2",
    "#e75fc3",
    "#f87be2",
    "#f2719a",
    "#fca4bb",
    "#f59a8f",
    "#fdb301",
    "#57e7ec",
    "#cf9ef1",
  ];
  var xdata = [
    "薯片",
    "蔬菜",
    "饮料",
    "家禽",
    "生活用品",
    "熟食",
    "佐料",
    "糕点",
    "电器",
    "大米",
  ];
  const option = {
    /*backgroundColor: "rgba(255,255,255,1)",*/
    color: color,
    legend: {
      orient: "vartical",
      x: "left",
      top: "center",
      left: "53%",
      bottom: "0%",
      data: xdata,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: "#fff",
      },
      formatter: function (name) {
        return "" + name;
      },
    },
    series: [
      {
        type: "pie",
        clockwise: false, //饼图的扇区是否是顺时针排布
        minAngle: 2, //最小的扇区角度（0 ~ 360）
        radius: ["20%", "60%"],
        center: ["30%", "45%"],
        avoidLabelOverlap: false,
        itemStyle: {
          //图形样式
          normal: {
            borderColor: "#ffffff",
            borderWidth: 1,
          },
        },
        label: {
          normal: {
            show: false,
            position: "center",
            formatter: "{text|{b}}\n{c} ({d}%)",
            rich: {
              text: {
                color: "#fff",
                fontSize: 14,
                align: "center",
                verticalAlign: "middle",
                padding: 8,
              },
              value: {
                color: "#8693F3",
                fontSize: 24,
                align: "center",
                verticalAlign: "middle",
              },
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: 24,
            },
          },
        },
        data: ydata,
      },
    ],
  };
  myChart.setOption(option);
  setTimeout(function () {
    myChart.on("mouseover", function (params) {
      if (params.name == ydata[0].name) {
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0,
        });
      } else {
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: 0,
        });
      }
    });

    myChart.on("mouseout", function (params) {
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });
    });
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: 0,
    });
  }, 1000);
  myChart.currentIndex = -1;
  setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: myChart.currentIndex,
    });
    myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: myChart.currentIndex,
    });
  }, 1000);
  // 使用刚指定的配置项和数据显示图表。
  /*myChart.setOption(option);*/
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
// 杂货销量
function ceshi2() {
  var myChart = init(document.getElementById("ceshi2"));
  const option = {
    /*backgroundColor: '#05163B',*/
    tooltip: {
      trigger: "axis",
    },
    toolbox: {
      show: true,
      feature: {
        mark: {
          show: true,
        },
        dataView: {
          show: true,
          readOnly: false,
        },
        magicType: {
          show: true,
          type: ["line", "bar"],
        },
        restore: {
          show: true,
        },
        saveAsImage: {
          show: true,
        },
      },
    },
    grid: {
      top: "middle",
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "35%",
      containLabel: true,
    },
    legend: {
      data: ["产量", "销量", "同比增加", "平均销量"],
      top: "13%",
      left: "3%",
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ebf8ac", //X轴文字颜色
          },
        },
        axisLine: {
          lineStyle: {
            color: "#01FCE3",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "产量",
        axisLabel: {
          formatter: "{value} 顿",
          textStyle: {
            color: "#2EC7C9", //X轴文字颜色
          },
        },
        axisLine: {
          lineStyle: {
            color: "#01FCE3",
          },
        },
      },
      {
        type: "value",
        name: "销量",
        axisLabel: {
          formatter: "{value} 件",
          textStyle: {
            color: "#2EC7C9", //X轴文字颜色
          },
        },
      },
    ],
    series: [
      {
        name: "产量",
        type: "bar",
        itemStyle: {
          normal: {
            barBorderRadius: 5,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#00FFE3",
              },
              {
                offset: 1,
                color: "#4693EC",
              },
            ]),
          },
        },
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
        ],
      },
      {
        name: "销量",
        type: "bar",
        itemStyle: {
          normal: {
            barBorderRadius: 5,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#C1B2EA",
              },
              {
                offset: 1,
                color: "#8362C6",
              },
            ]),
          },
        },
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
        ],
      },
      {
        name: "同比增加",
        type: "line",
        yAxisIndex: 1,
        data: [
          2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
        ],
        lineStyle: {
          normal: {
            width: 5,
            color: {
              type: "linear",

              colorStops: [
                {
                  offset: 0,
                  color: "#AAF487", // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: "#47D8BE", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: "#47D8BE", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
            shadowColor: "rgba(71,216,190, 0.5)",
            shadowBlur: 10,
            shadowOffsetY: 7,
          },
        },
        itemStyle: {
          normal: {
            color: "#AAF487",
            borderWidth: 10,
            /*shadowColor: 'rgba(72,216,191, 0.3)',
                             shadowBlur: 100,*/
            borderColor: "#AAF487",
          },
        },
        smooth: true,
      },
      {
        name: "平均销量",
        type: "line",
        yAxisIndex: 1,
        data: [
          4.0, 3.2, 2.3, 5.5, 4.3, 11.2, 15.3, 22.4, 21.0, 13.5, 12.0, 10.2,
        ],
        lineStyle: {
          normal: {
            width: 5,
            color: {
              type: "linear",

              colorStops: [
                {
                  offset: 0,
                  color: "#F8B854", // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: "#DE801C", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: "#DE801C", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
            shadowColor: "rgba(71,216,190, 0.5)",
            shadowBlur: 10,
            shadowOffsetY: 7,
          },
        },
        itemStyle: {
          normal: {
            color: "#F7AD3E",
            borderWidth: 10,
            shadowColor: "rgba(72,216,191, 0.3)",
            shadowBlur: 100,
            borderColor: "#F7AD3E",
          },
        },
        smooth: true,
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
// 中间底部
function ceshi6() {
  var myChart = init(document.getElementById("ceshi6"));
  var data = [110, 20, 36, 10, 50, 80, 100, 60];
  var sum = 0;
  var percentdata = [];
  for (var i = 0; i < data.length; i++) {
    sum += data[i];
  }
  for (var j = 0; j < data.length; j++) {
    percentdata.push(((data[j] / sum) * 100).toFixed(2));
  }
  const option = {
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(83,93,105,0.8)",
      borderColor: "#535b69",
      borderRadius: 8,
      borderWidth: 2,
      padding: [5, 10],
      textStyle: {
        color: "#fff",
      },
      axisPointer: {
        type: "cross",
      },
      formatter: "{a} <br/>{b}: {c}%",
    },
    // color: ["#0035f9", "#f36f8a", "#ffff43", "#25f3e6"],
    grid: {
      left: "8%",
      right: "10%",
      top: "12%",
      bottom: "18%",
      containLabel: true,
    },
    yAxis: {
      data: [
        "薯片",
        "蔬菜",
        "饮料",
        "家禽",
        "生活用品",
        "熟食",
        "佐料",
        "电器",
      ],
      axisTick: {
        show: false,
      },
      axisLabel: {
        formatter: "{value} ",
        textStyle: {
          color: "#2EC7C9", //X轴文字颜色
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#2EC7C9",
        },
      },
    },

    xAxis: [
      {
        axisTick: {
          show: false,
        },
        type: "value",
        // max: 100,
        splitNumber: 5,
        axisLabel: {
          formatter: "{value}%",
          show: true,
          textStyle: {
            color: "#ebf8ac", //X轴文字颜色
          },
        },
        axisLine: {
          lineStyle: {
            color: "#91CC75",
          },
        },
      },
    ],
    series: [
      {
        name: "销量",
        type: "bar",
        itemStyle: {
          normal: {
            barBorderRadius: 5,
            color: function (params) {
              var colorList = [
                "#00FFFF",
                "#44EAB1",
                "#7BDD43",
                "#FEBE12",
                "#EBEC2F",
                "#FF7C44",
                "#FA3E5F",
                "#6635EF",
                "#FFAFDA",
                "#00b2f1",
                "#4d6022",
                "#4b83bf",
                "#f9c813",
                "#0176c0",
              ];
              return colorList[params.dataIndex];
            },
            // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //   {
            //     offset: 0,
            //     color: "#25f3e6",
            //   },
            //   {
            //     offset: 1,
            //     color: "#4693EC",
            //   },
            // ]),
          },
        },
        barWidth: "55%",
        label: {
          normal: {
            show: true,
            position: "right",
            formatter: "{c}%",
            textStyle: {
              color: "#ffffff",
            },
          },
        },
        data: percentdata,
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
//产量分析
function ceshi7() {
  var myChart = init(document.getElementById("ceshi7"));
  const option = {
    /*backgroundColor: '#031845',*/
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            /*image: giftImageUrl,*/
            width: 50,
            height: 50,
          },
          left: "center",
          top: "center",
        },
      ],
    },
    title: {
      text: "产量分析",
      left: "center",
      top: "10%",
      padding: [24, 0],
      textStyle: {
        color: "#fff",
        fontSize: 18,
        align: "center",
      },
    },
    legend: {
      orient: "horizontal",
      icon: "circle",
      bottom: -20,
      x: "center",
      data: ["薯片", "蔬菜", "家禽", "饮料", "熟食", "电器", "生活用品"],
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        name: "产量",
        type: "pie",
        radius: ["25%", "35%"],
        color: [
          "#00FFFF",
          "#44EAB1",
          "#7BDD43",
          "#FEBE12",
          "#EBEC2F",
          "#FF7C44",
          "#FA3E5F",
          "#6635EF",
          "#FFAFDA",
        ],
        labelLine: {
          normal: {
            show: true,
            length: 10,
            length2: 10,
            lineStyle: {
              width: 1,
            },
          },
        },
        label: {
          normal: {
            formatter: "{c|{c}}\n{hr|}\n{d|{d}%}",
            rich: {
              b: {
                fontSize: 12,
                color: "#12EABE",
                align: "left",
                padding: 4,
              },
              hr: {
                borderColor: "#12EABE",
                width: "80%",
                borderWidth: 2,
                height: 0,
              },
              d: {
                fontSize: 12,
                color: "#fff",
                align: "left",
                padding: 4,
              },
              c: {
                fontSize: 12,
                color: "#fff",
                align: "left",
                padding: 4,
              },
            },
          },
        },
        data: [
          {
            value: 360,
            name: "薯片",
          },
          {
            value: 100,
            name: "蔬菜",
          },
          {
            value: 100,
            name: "家禽",
          },
          {
            value: 100,
            name: "饮料",
          },
          {
            value: 100,
            name: "熟食",
          },
          {
            value: 100,
            name: "电器",
          },
          {
            value: 100,
            name: "生活用品",
          },
        ],
      },
    ],
  };
  myChart.currentIndex = -1;
  myChart.setOption(option);
  setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: myChart.currentIndex,
    });
    myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: myChart.currentIndex,
    });
  }, 1000);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
// 销售额统计
function init_myChart6() {
  var myChart = init(document.getElementById("main6"));
  var data = {
    uploadData: [
      { count: 5421, areaName: "薯片" },
      { count: 6512, areaName: "蔬菜" },
      { count: 3721, areaName: "饮料" },
      { count: 2842, areaName: "家禽" },
      { count: 6427, areaName: "熟食" },
      { count: 4422, areaName: "雪糕" },
      { count: 1020, areaName: "电器" },
      { count: 1421, areaName: "大米" },
      { count: 1776, areaName: "鸡蛋" },
      { count: 2428, areaName: "甜食" },
    ],
  };
  var uploadCnt = [];
  var updateCnt = [];
  var viewCnt = [];
  var areaNameS = [];
  if (data.uploadData) {
    for (var i = 0; i < data.uploadData.length; i++) {
      uploadCnt.push(data.uploadData[i].count);
      areaNameS.push(data.uploadData[i].areaName);
    }
  }
  if (data.updateData) {
    for (var i = 0; i < data.updateData.length; i++) {
      updateCnt.push(data.updateData[i].count);
    }
  }
  if (data.viewData) {
    for (var i = 0; i < data.viewData.length; i++) {
      viewCnt.push(data.viewData[i].count);
    }
  }
  const option = {
    tooltip: {
      trigger: "axis",
      transitionDuration: 0,
      backgroundColor: "rgba(83,93,105,0.8)",
      borderColor: "#535b69",
      borderRadius: 8,
      borderWidth: 2,
      padding: [5, 10],
      textStyle: {
        color: "#fff",
      },
      formatter: function (params, ticket, callback) {
        var res = "";
        for (var i = 0, l = params.length; i < l; i++) {
          res += "" + params[i].seriesName + " : " + params[i].value + "<br>";
        }
        return res;
      },
      axisPointer: {
        type: "line",
        lineStyle: {
          type: "dashed",
          color: "#fff",
        },
      },
    },
    grid: {
      top: "40",
      left: "30",
      right: "10",
      bottom: "40",

      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      right: "24",
      top: "24",
      itemWidth: 8,
      itemHeight: 12,
      textStyle: {
        color: "#fff",
        fontSize: 10,
      },
      data: ["资源总量"],
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#868c96",
          },
        },
        axisLabel: {
          interval: 0,
          fontSize: 12,
          formatter: function (value) {
            var ret = ""; //拼接加\n返回的类目项
            var maxLength = 2; //每项显示文字个数
            var valLength = value.length; //X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1) {
              //如果类目项的文字大于3,
              for (var i = 0; i < rowN; i++) {
                var temp = ""; //每次截取的字符串
                var start = i * maxLength; //开始截取的位置
                var end = start + maxLength; //结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串
              }
              return ret;
            } else {
              return value;
            }
          },
        },
        splitArea: {
          show: false,
        },
        data: areaNameS,
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        offset: -14,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#868c96",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          fontSize: 10,
        },
        splitArea: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "资源总量",
        type: "bar",
        barGap: "10%",
        itemStyle: {
          //图形样式
          normal: {
            // color: "#4a4df0",
            color: function (params) {
              // build a color map as your need.
              var colorList = [
                "#ff2600",
                "#ffc000",
                "#00ad4e",
                "#0073c2",
                "#165868",
                "#e76f00",
                "#316194",
                "#723761",
                "#00b2f1",
                "#4d6022",
                "#4b83bf",
                "#f9c813",
                "#0176c0",
              ];
              return colorList[params.dataIndex];
            },
          },
        },
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: "#ffc72b",
              fontSize: 10,
            },
          },
        },
        data: uploadCnt,
        barWidth: 14,
      },
      {
        name: "折线",
        type: "line",
        itemStyle: {
          /*设置折线颜色*/
          normal: {
            color: "#c7b198",
          },
        },
        data: [5421, 6512, 4621, 2842, 6427, 4422, 1020, 1421, 1776, 2428],
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
//散点图
function ceshi9(data) {
  var myChart = init(document.getElementById("echart2"));
  var itemStyle = {
    opacity: 0.8,
  };
  var sizeFunction = function (x) {
    var y = Math.sqrt(x / 5e8) + 0.1;
    return y * 60;
  };
  // Schema:
  var schema = [
    { name: "Income", index: 0, text: "利润收入", unit: "元" },
    { name: "LifeExpectancy", index: 1, text: "购货年龄", unit: "岁" },
    { name: "Population", index: 2, text: "总支出", unit: "元" },
    { name: "Country", index: 3, text: "杂货名称", unit: "" },
  ];
  const option = {
    baseOption: {
      timeline: {
        axisType: "category",
        orient: "vertical",
        autoPlay: true,
        inverse: true,
        playInterval: 1000,
        left: null,
        right: 0,
        top: 20,
        bottom: 20,
        width: 55,
        height: null,
        symbol: "none",
        checkpointStyle: {
          borderWidth: 2,
        },
        controlStyle: {
          showNextBtn: false,
          showPrevBtn: false,
        },
        data: [],
      },
      title: [
        {
          text: data.timeline[0],
          textAlign: "center",
          left: "73%",
          top: "20%",
          textStyle: {
            fontSize: 32,
            color: "#786090",
          },
        },
        {
          text: "历年杂货销售GDP",
          left: "center",
          top: 10,
          textStyle: {
            fontWeight: "normal",
            fontSize: 20,
            color: "#fff",
          },
        },
      ],
      tooltip: {
        padding: 5,
        borderWidth: 1,
        formatter: function (obj) {
          var value = obj.value;
          // prettier-ignore
          return schema[3].text + '：' + value[3] + '<br>'
                        + schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
                        + schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
                        + schema[2].text + '：' + value[2] + '<br>';
        },
      },
      grid: {
        top: 60,
        containLabel: true,
        left: 10,
        right: "110",
      },
      xAxis: {
        type: "log",
        name: "销售总量",
        max: 100000,
        min: 300,
        nameGap: 30,
        nameLocation: "middle",
        nameTextStyle: {
          fontSize: 16,
          color: "#6890ba",
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          formatter: "{value}",
        },
      },
      yAxis: {
        type: "value",
        name: "购买年龄",
        max: 100,
        nameTextStyle: {
          fontSize: 16,
          color: "#fbc357",
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          formatter: "{value} 岁",
        },
      },
      visualMap: [
        {
          show: false,
          dimension: 3,
          categories: data.counties,
          inRange: {
            color: (function () {
              // prettier-ignore
              var colors = ['#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090', '#91c4c5', '#6890ba'];
              return colors.concat(colors);
            })(),
          },
        },
      ],
      series: [
        {
          type: "scatter",
          itemStyle: itemStyle,
          data: data.series[0],
          symbolSize: function (val) {
            return sizeFunction(val[2]);
          },
        },
      ],
      animationDurationUpdate: 1000,
      animationEasingUpdate: "quinticInOut",
    },
    options: [],
  };
  for (var n = 0; n < data.timeline.length; n++) {
    option.baseOption.timeline.data.push(data.timeline[n]);
    option.options.push({
      title: {
        show: true,
        text: data.timeline[n] + "",
      },
      series: {
        name: data.timeline[n],
        type: "scatter",
        itemStyle: itemStyle,
        data: data.series[n],
        symbolSize: function (val) {
          return sizeFunction(val[2]);
        },
      },
    });
  }
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
// 时钟图
function shizhong() {
  var myChart = init(document.getElementById("shizhong"));
  const option = {
    color: [
      "#37a2da",
      "#32c5e9",
      "#9fe6b8",
      "#ffdb5c",
      "#ff9f7f",
      "#fb7293",
      "#e7bcf3",
      "#8378ea",
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    toolbox: {
      show: true,
    },
    calculable: true,
    legend: {
      orient: "horizontal",
      icon: "circle",
      bottom: 0,
      x: "center",
      data: ["薯片", "蔬菜", "饮料", "家禽", "海鲜", "熟食"],
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        name: "来源杂货统计",
        type: "pie",
        radius: [10, 60],
        roseType: "area",
        center: ["50%", "40%"],
        data: [
          { value: 10, name: "薯片" },
          { value: 5, name: "蔬菜" },
          { value: 15, name: "饮料" },
          { value: 25, name: "家禽" },
          { value: 20, name: "海鲜" },
          { value: 35, name: "熟食" },
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/home.scss";
</style>
